<template>
  <customContainer ref="mainConfig" :config="config" />
  <div>
    <el-dialog
      v-model="open"
      :close-on-click-modal="false"
      title="详情"
      append-to-body
    >
      <el-form
        ref="queryForm2"
        :model="queryParams2"
        inline
        label-width="90px"
      >
        <el-form-item label="客户单号" prop="waybillNo">
          <el-input
            v-model="queryParams2.waybillNo"
            type="textarea"
            size="small"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="cyan"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery2"
          >
            搜索
          </el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery2">重置</el-button>
        </el-form-item>
      </el-form>

      <el-table
        v-loading="subLoading"
        show-summary
        :summary-method="detailSummary"
        :data="subTable"
        border
      >
        <el-table-column label="客户名称" prop="customerName" show-overflow-tooltip></el-table-column>
        <el-table-column
          label="客户单号"
          width="150"
          prop="waybillNo"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column label="订单号" prop="orderNo" show-overflow-tooltip></el-table-column>
        <el-table-column label="主转单号" prop="mainTransferOrderNo" show-overflow-tooltip></el-table-column>
        <el-table-column label="总件数" prop="shipmentTotal"></el-table-column>
        <el-table-column label="总实重" prop="shipmentTotalWeight"></el-table-column>
        <el-table-column label="总材积重" prop="shipmentTotalWood"></el-table-column>
        <el-table-column label="提单应收" prop="income"></el-table-column>
        <el-table-column label="ups运费($)" width="100" prop="upsAmount"></el-table-column>
        <el-table-column label="提单应付" prop="spending"></el-table-column>
        <el-table-column label="预估利润" prop="profits"></el-table-column>
      </el-table>
      <pagination
        v-show="subTotal > 0"
        v-model:page="queryParams2.pageNum"
        v-model:limit="queryParams2.pageSize"
        :total="subTotal"
        @pagination="handleDelita(row)"
      />
    </el-dialog>
  </div>
</template>
<script lang='ts' setup>
import { ref, computed, getCurrentInstance } from 'vue'
import { Download } from '@element-plus/icons-vue'
import { DictDirection } from '@/store/modules/dicts'
import { eTableSum } from '@/utils/index'

const mainConfig = ref(null),
  {
    appContext: {
      config: {
        globalProperties: { $download },
      },
    },
  } = getCurrentInstance()
const { proxy } = getCurrentInstance() as any
const queryParams = ref({
  pageSize: 10,
  pageNum: 1,
  salesProductCode: '',
  dateRange: '',
  transportType: '',
})   
const open = ref(false)
const queryForm2 = ref(undefined)
const subLoading = ref(false)
const queryParams2 = ref({
  waybillNo: '',
})
const detailSummary = (param) => {
  const list1 = ['customerName', 'waybillNo', 'orderNo', 'mainTransferOrderNo']
  return eTableSum(param, list1, proxy.rows)
}

const subTable = ref([])
const handleQuery2 = () => {

}
const resetQuery2 = () => {
  
}
const handleDelita = () => [
  
]
const handexport = () => {
  $download('order/product/toProductProfitsExp', `productReportForm_${ new Date().getTime() }.zip`)
}
const handleTableSelect = (rows: { [key: string]: any }[]) => {
  console.log(rows)
}
const config = computed({
  get() {
    return {
      query: {
        fields: [
          {
            label: '销售产品名称',
            type: 'select',
            prop: 'salesProductCode',
            option: {
              dictInfo: { dict: DictDirection.产品 },
            },
          },
          {
            label: '运输类型',
            type: 'select',
            prop: 'transportType',
            option: {
              dictInfo: { dict: DictDirection.运输类型 },
            },
          },
          {
            label: '下单时间',
            type: 'datePicker',
            prop: 'dateRange',
            option: {
              type: 'daterange',
              valueFormat: 'YYYY-MM-DD',
            },
          },
        
        ],
        queryParams: queryParams.value,
      
      },
      btns: [
        {
          title: '导出',
          type: 'primary',
          icon: Download,
          onClick: handexport,
        },
       
      ],
      table: {
        columns: [
          { type: 'selection', width: '55' },
          { label: '销售产品名称',
            align: 'center',
            prop: 'salesProductName',
            autoFormatter: {
              dict: DictDirection.产品,
              rowKey: 'marketProducts',
            } },
          { label: '总票数', align: 'center', prop: 'ticketTotal' },
          { label: '总件数', align: 'center', prop: 'totalNumber' },
          { label: '总实重', align: 'center', prop: 'receivingTotalWeight' },
          { label: '总材积重', align: 'center', prop: 'receivingTotalWood' },
          { label: '总计费重', align: 'center', prop: 'receivingTotalCharging' },
          { label: '应收金额', align: 'center', prop: 'receivableTotalAmount' },
          { label: '实收金额', align: 'center', prop: 'paidAmount' },
          { label: '毛利润', align: 'center', prop: 'grossProfit' },
          { label: '运输类型',
            align: 'center',
            prop: 'transportType',
            autoFormatter: {
              dict: DictDirection.运输类型,
              rowKey: 'marketProducts',
            } },
         
        ],
        event: {
          onSelectionChange: (rows) => {
            handleTableSelect(rows)
          },
        },
      },
      api: '',
      customKey: 'dataReport/generalSummary',
    }
  },
  set(v) {
    return v
  },
})
</script>
